<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: pink;

      /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
      animation: change 1s 2s;

      /* steps：分布动画，工作中常配合精灵图实现精灵动画 */
      animation: 1s steps(5);

      /* infinite: 循环播放;  alternate: 反向；forward: 动画结束后停在结束位置 */
      animation: change 3s infinite linear alternate forwards;
    }

    /* change为动画名称 */
    /* @keyframes change {
      from {
        width: 200px;
        background-color: pink;
      }

      to {
        width: 800px;
        background-color: yellowgreen;
      }
    } */

    /* 百分比：表示动画时长的百分比 */
    @keyframes change {
      0% {
        width: 200px;
        background-color: pink;
      }

      50% {
        width: 500px;
        background-color: yellowgreen;
      }

      100% {
        width: 800px;
        background-color: skyblue;
      }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>